<template>
	<view>
		<view class="example-title">商品信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<image style="width:200rpx;height:180rpx" mode="aspectFit" :src="item.imgUrl" @error="imageError" @click="chooseImage"/>
				<view class="uni-flex uni-column">
					<uni-list-item :show-arrow="false" title="商品名称" />
					<uni-list-item :show-arrow="false" title="商品条码" />
				</view>
				<view class="uni-flex uni-column">
					<input class="uni-input" maxlength="20" style="text-align:right;width: 300rpx;" v-model="item.itemName"   placeholder="填写商品名称" />
					<input class="uni-input" style="text-align:right;width: 300rpx;" v-model="item.code" disabled="true"  placeholder="填写商品条码" />
				</view>
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="商品类别"/>
				<view class="uni-list-cell-navigate uni-navigate-right"  hover-class="uni-list-cell-hover" @click="goDetailPage(list.url)">
					<input class="uni-input" style="text-align:right;" v-model="item.typeName" disabled="true"  placeholder="选择类别" />
				</view>
			</view>
		</uni-list>
		<view class="example-title">库存信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="规格"/>
				<input class="uni-input" maxlength="32" style="text-align:right;" v-model="item.standard"  placeholder="填写规格" />
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="当前库存"/>
				<input class="uni-input" style="text-align:right;" v-model="shopItem.stock" maxlength="9" type="number"   placeholder="填写库存" />
			</view>
		</uni-list>
		<view class="example-title">价格信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="定价"/>
				<input class="uni-input" style="text-align:right;" v-model="item.price" type="digit" maxlength="9"  placeholder="填写定价" />
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="进价"/>
				<input class="uni-input" style="text-align:right;" v-model="shopItem.buyPrice" type="digit" maxlength="9"  placeholder="填写进价" />
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="售价"/>
				<input class="uni-input" style="text-align:right;" v-model="shopItem.sellPrice" type="digit" maxlength="9"  placeholder="填写售价" />
			</view>
		</uni-list>
		<view class="example-title">渠道信息</view>
		<uni-list>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="生产商"/>
				<input class="uni-input" style="text-align:right;" v-model="item.supplierName"  disabled="true"  placeholder="填写生产商" />
			</view>
			<view class="uni-flex uni-row">
				<uni-list-item :show-arrow="false" title="进货商"/>
				<input class="uni-input" style="text-align:right;" v-model="shopItem.buyerName" maxlength="9" type="number"  placeholder="填写进货商" />
			</view>
		</uni-list>
		<view class="example-title">操作</view>
		<uni-list>
				<view class="uni-flex uni-row" style="justify-content: center;">
					<view class="tag-view">
						<uni-tag text="返回" type="success" :circle="true" @click="back"/>
					</view>
					<view class="tag-view">
						<uni-tag text="提交" type="primary" :circle="true" @click="confirm" v-no-more-click/>
					</view>
				</view>
		</uni-list>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue";
		//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var graceChecker = require("@/common/graceChecker.js");
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['hasLogin', 'userInfo','baseUrl']),
		components: {
			uniList,
			uniListItem,
			uniTag
		},
		data() {
			return {
				imageShow:false,
				itemId:null,
				itemBean:{},
				item:{imgUrl:'/static/img/none.jpg'},
				shopItem:{},
				types:[],
				extraIcon1: {
					color: '#007aff',
					size: '22',
					type: 'info-filled'
				},
				extraIcon2: {
					color: '#4cd964',
					size: '22',
					type: 'spinner'
				}
			}
		},
		async onLoad(parm) {
			if(!parm.data)return;
			console.log(parm.data);
			var data=JSON.parse(decodeURIComponent(parm.data));
			let res;
			try{
				res = await this.$request.get("/item/queryByCode", {
					data: {
						code: data.code,
						shopId:data.shopId
					}
				});
			}catch(e){
				this.$set(this.item,'code',data.code);
				this.$set(this.shopItem,'shopId',data.shopId);
			}
			this.itemBean = res.data;
			this.item=this.itemBean.item;
			this.shopItem=this.itemBean.shopItem;
			this.$set(this.shopItem,'shopId',data.shopId);
			let res2 = await this.$request.get("/item/listType");
			this.types=res2.data;
		},
		async onShow(){
			if(!this.hasLogin){
				this.isLogin();
				return;
			}
		},
		methods: {
			...mapMutations(['isLogin']),
			chooseImage: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0];
						this.$set(this.item,'imgUrl',imageSrc);
						this.imageShow=true;
						
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			imageError: function(e) {
				console.log(e.detail.errMsg+":"+JSON.stringify(this.item))
				this.$set(this.item,'imgUrl','/static/img/none.jpg');
			},
			back(){
				var pages = getCurrentPages();
				if(pages.length==1){
					uni.switchTab({
						url: '/pages/stock/index'
					});
				}else{
					uni.navigateBack({
						delta:1
					});
				}
			},
			async confirm(){
					var rule = [{
						name: "itemName",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: "商品名称应为1-50个字符"
					},
					{
						name: "standard",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "商品规格不能为空"
					},
					{
						name: "price",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "定价不能为空"
					}
				];
				var shopItemRule = [
					{
						name: "stock",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "库存不能为空"
					},
					{
						name: "buyPrice",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "进价不能为空"
					},
					{
						name: "sellPrice",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "售价不能为空"
					}
				];
				var checkRes = graceChecker.check(this.item, rule);
				var checkShopItemRule = graceChecker.check(this.shopItem, shopItemRule);
				if (checkRes&&checkShopItemRule) {
					var res = await this.$request.post("/item/edit", {
						data: this.itemBean
					});
					if(this.imageShow){
						uni.uploadFile({
							url: this.baseUrl+'/item/fileUp',
							filePath: this.item.imgUrl,
							fileType: 'image',
							name: this.imageShow?'file':'',
							formData: res.data,
							header: {
								'token': uni.getStorageSync("token"),
							},
							success: (res) => {
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					}
					uni.showToast({
						title:"保存成功",
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28rpx;
		line-height: inherit
	}

	.example {
		padding: 0 30rpx 30rpx
	}

	.example-title {
		font-size: 22rpx;
		line-height: 10rpx;
		color: #777;
		margin: 20rpx 25rpx;
		position: relative
	}

	.example .example-title {
		margin: 40rpx 0
	}

	.example-body {
		padding: 0 40rpx
	}
	
	.tag-view {
		margin: 10rpx 50rpx;
		display: inline-block;
	}
	.uni-input{
		font-family: Hiragino Sans GB;
		font-size: 28rpx;
		color: #777;
	}
</style>
